<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-text、v-html -->
        <p>{{msg}}</p>
        <p v-text="msg"></p>
        <p v-html="msg"></p>

        <!-- v-on -->
        <button v-on:click="show()">按钮1</button>
        <button v-on:click="show">按钮2</button>
        <button @click="show">按钮3</button>
        <button @click="print(5)">按钮4</button>
        <button @click="print(name)">按钮5</button>
        <button @click="print('lucy')">按钮6</button>

        <p>{{ name }}</p>
        <button @click="setAge">修改name</button>
        <button @click="name='汤姆'">修改name</button>
        <hr>

        <!-- v-show -->
        <button @click="flag=!flag">变</button>
        <!-- <div style="width: 100px;height: 100px;background: red;" v-show="flag"></div> -->
        <div style="width: 100px;height: 100px;background: red;" v-if="flag"></div>

        <!-- v-if、v-else-if、v-else -->
        <p v-if="age>=60">老年</p>
        <p v-else-if="age>=30">青年</p>
        <p v-else>少年</p>
        <hr>

        <!-- v-for -->
        <ul>    
            <!-- <li v-for="name in names">{{ name }}</li> -->
            <!-- <li v-for="(name,index) in names" :key="index">{{ index }} = {{ name }}</li> -->

            <li v-for="item in num">{{ item }}</li>
        </ul>
        <hr>

        <!-- v-bind -->
        <img :src="url" v-bind:width="width">
        <hr>


        <!-- v-model -->
        <p>{{name}}</p>
        用户名: <input type="text" v-model="name"> <br>
        性别: <input type="radio"  value="male" v-model="sex">男 
              <input type="radio"  value="female" v-model="sex">女 <br>
        爱好: <input type="checkbox" value="eat" v-model="hobbies"> 吃饭
              <input type="checkbox" value="sleep" v-model="hobbies">睡觉
              <input type="checkbox" value="run" v-model="hobbies">跑步</input> <br>
        同意: <input type="checkbox" v-model="gree"></input>
        <hr>

        <!-- 
            计算属性
        -->
        <p>{{ message }}</p>
        <p>{{ message2 }}</p>
        <button @click="message='good good study'">修改message</button>
        <hr>

        <p>{{ user.username }}</p>
        <button @click="user.username='aaa'">修改user.username</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: { // 数据仓库 普通属性
                msg: '<h2>hello</h2>',
                name: 'jack',
                flag: true,
                age: 27,
                names: ['tom', 'lucy', 'lili', 'alice'],
                num: 5,
                url: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
                width: '200px',
                sex: 'male',
                hobbies: [],
                gree: false,
                message: 'welcome to nanjing',
                user: {
                    username: 'admin',
                    password: '123456'
                }
            },
            computed: { // 计算属性
                message2: function(){
                    return this.message.toUpperCase().split(' ').reverse().join(' ')
                }
            },
            watch: { // 监视器
                message: function(newValue, oldValue){
                    console.log(newValue, oldValue)
                },
                user: {
                    handler: function(newValue){
                        console.log(newValue)
                    },
                    deep: true // 开启深度监视
                }
            },
            methods: { // 方法仓库
                show(){ // 简写！！！！
                    console.log(111)
                },
                print: function(args){
                    console.log(args)
                },
                setAge: function(){
                    // console.log(this)
                    // console.log(this === vm)
                    // 数据仓储和方法仓库中定义的内容，都会被放到Vue实例上
                    // console.log(this.name)
                    // console.log(this.msg)
                    // this.show()

                    this.name = '杰克'
                }
            }
        })

    </script>
</body>

</html>